<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>原始数据</h2>
      <ul>
        <li v-for="todo in todos" :key="todo.id">
          {{ todo.id }} - {{ todo.title }}
        </li>
      </ul>

      <h2>排序数据</h2>
      <button @click="sort = !sort">点我，让 todos 根据 id 做排序</button>
      <ul>
        <li v-for="todo in displayTodos" :key="todo.id">
          {{ todo.id }} - {{ todo.title }}
        </li>
      </ul>

      <h2>搜索数据</h2>
      <!-- 
        Vue3 中 键盘事件的 keyCode 码不能用
       -->
      <input
        type="text"
        placeholder="请输入关键字"
        :value="searchValue"
        @keyup.enter="onSearch"
      />
      <ul>
        <li v-for="todo in searchResult" :key="todo.id">
          {{ todo.id }} - {{ todo.title }}
        </li>
      </ul>

      <p>当前todos的长度：{{ todos.length }}</p>
      <p>当前todos的id集合：{{ todos.map(item => item.id) }}</p>
    </div>

    <script src="./lib/vue.global.js"></script>
    <script>
      const { ref, computed } = Vue;
      Vue.createApp({
        setup() {
          const sort = ref(true); // true - 正  false - 到

          const todos = ref([
            { id: 1, title: "吃饭" },
            { id: 3, title: "打豆豆" },
            { id: 2, title: "睡觉" },
          ]);

          // 计算属性
          const displayTodos = computed(() => {
            // 做一份拷贝，避免 sort 修改到原数据
            const arr = [...todos.value];
            // 必须有返回值
            return arr.sort((a, b) => {
              return sort.value ? a.id - b.id : b.id - a.id;
            });
          });

          // 搜索关键字
          const searchValue = ref("");
          // 搜索结果展示用的数据
          const searchResult = computed(() => {
            return todos.value.filter(
              // 精准搜索
              // (todo) => todo.title === searchValue.value

              // 模糊搜素
              (todo) => todo.title.includes(searchValue.value)
            );
          });
          // 处理输入框回车事件
          function onSearch(event) {
            // 1. 获取输入框输入的内容
            const value = event.target.value;
            // 2. 将value赋值给 searchValue
            searchValue.value = value;
          }

          return {
            sort,
            todos,
            displayTodos,

            searchValue,
            searchResult,
            onSearch,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
